import { debounce } from '@/plugin/tool'
import HeaderDragMove from './HeaderDragMove'
import { EventHelper } from 'major-schedulerpro'
export default class Listeners extends HeaderDragMove {
  constructor() {
    super()
    //  防抖--水平滚动时设置事件label 位置
    this.setEventLabelPositions = debounce(this.setEventLabelPositions, 100)
    // this.initDragMoveFN(container)
  }
  /**
   * 初始化一个拖拽移动事件
   * @param {*} container
   */
  initDragMoveFN(container) {
    EventHelper.on({
      element: container,
      mousedown: event => {
        this.onHeaderZoomMouseDown(event)
      }, // 鼠标拖动时间轴移动
      click: () => {
        if (this.headerZoomMove) return
      },
      dragover: event => {
        // 阻止默认行为，启用drop
        event.preventDefault()
      }
    })
  }
  getCommonListeners() {
    const that = this
    return {
      beforeRenderRows(source) {
        console.log('哈哈哈', source)
      },
      /**
       * 监听水平滚动滚动轴
       * 设置timeLine header时间位置信息
       */
      horizontalScroll() {
        /**
         * 处理事件 labels位置
         */
        that.setEventLabelPositions()
      },
      /**
       * 联合识别
       * @param {*} eventRecord
       */

      /**
       * 添加至工作区
       * @param {*} eventRecord
       */
      addToWorkSpace(eventRecord) {
        that.addToWorkSpace(eventRecord)
      }
    }
  }

  /**
   * 调整事件label位置保证在视野范围之内
   */
  async setEventLabelPositions() {
    if (!this.scheduler || this.scheduler.features.labels.disabled) return
    await this.scheduler.project.commitAsync()
    // 调整事件范围默认为整个甘特图
    const containerDOM = this.options.container,
      allLabels = containerDOM.querySelectorAll('.major-gantt-label'),
      subGrids_rect = this.scheduler.subGrids.locked?.currentElement?.getBoundingClientRect()

    for (const item of allLabels) {
      const PARENT_NDOE = item.parentNode,
        P_RECT = PARENT_NDOE.parentNode.getBoundingClientRect()
      if (!P_RECT.width) continue
      let aleft = Math.max(subGrids_rect.left + subGrids_rect.width - P_RECT.left, 0)
      // 完全遮挡
      aleft > P_RECT.width && (aleft = P_RECT.width)

      PARENT_NDOE.style.cssText = `left:${aleft + 20}px;`
    }
  }

  /**
   * 将规划事件添加至工作区
   * @param {*} eventRecord
   */
  addToWorkSpace(eventRecord) {
    console.log('添加到工作区')
    // 将之前泳道数据清空
    // const allRecords = this.workScheduler.scheduler.eventStore.getEventsForResource(2)
    // this.workScheduler.scheduler.eventStore.remove(allRecords)
    this.workScheduler.scheduler.eventStore.removeAll()
    const startDate = +new Date(eventRecord.startDate),
      endDate = +new Date(eventRecord.endDate),
      diffTime = (endDate - startDate) / 3,
      /**
       * 事件中添加属性 fillEventRecordType 表示可以拖拽进入释放的节点
       */
      connectName = [
        {
          name: '接入',
          fillEventRecordType: 'access',
          customEventType: 'access',
          id: 'access'
        },
        {
          name: '链路',
          // fillEventRecordType: 'transmit',
          customEventType: 'transmit',
          id: 'transmit'
        },
        {
          name: '提供服务',
          fillEventRecordType: 'services',
          customEventType: 'services',
          id: 'services'
        }
      ]
    eventRecord.originalData.resourceId = 2
    let stores = [eventRecord.originalData]
    for (let index = 0; index < 3; index++) {
      stores.push({
        ...connectName[index],
        startDate: new Date(startDate + diffTime * index),
        endDate: new Date(startDate + diffTime * (index + 1)),
        resourceId: 2,
        // 设置事件类型为 lhch （白色虚线边框类型）
        eventStyle: 'lhch'
      })
    }
    this.workScheduler.addEvents(stores)
    // 模拟数据
    this.workScheduler.mockInfoAndServeData()
  }
}
